<template>
  <div class="content">
    <div class="steps OrderCreate">
      <el-steps :active="1" :align-center="true">
        <el-step title="填写订单信息"></el-step>
        <el-step title="提交"></el-step>
        <el-step title="收货&支付"></el-step>
        <!-- <el-step title="评论"></el-step> -->
      </el-steps>
      <!-- <div class="item"><b>1</b><span>填写订单信息</span></div>
      <div class="item"><b>2</b><span>提交&支付</span></div>
      <div class="item"><b>3</b><span>确认收货</span></div>
      <div class="item"><b>4</b><span>评论</span></div> -->
    </div>
    <div class="title">
      <div class="tips">收货信息</div>
      <div class="addr">
        <router-link to="/user/addr">管理收货地址</router-link>
      </div>
      <!-- <div class="add_addr" @click="addAddr">
        <icon name="iconshangchuanzhaopian" size="12" />新增收货地址
      </div> -->
    </div>
    <div class="addrs-list">
      <AddrsItem1
        :addr="item"
        :select="addressIndex === index"
        v-for="(item, index) in addrList"
        @click.native="addressIndex = index"
        :key="index"
      />
    </div>
    <div class="type pay">
      <div class="tips">支付方式</div>
      <div class="item">货到付款 <icon name="icongouxuan" size="16" /></div>
    </div>
    <div class="type delivery">
      <div class="tips">配送方式</div>
      <div class="item">送货上门 <icon name="icongouxuan" size="16" /></div>
    </div>
    <div class="title">
      <div class="tips">确认订单信息</div>
    </div>
    <div class="shop-item" v-for="(item, index) in goodsList" :key="index">
      <div class="shop-title">
        <img :src="item.shop_img" alt="" />
        <div class="tit">{{ item.shop_name }}</div>
      </div>
      <div class="goods">
        <div class="goods-title">
          <div class="info">商品信息</div>
          <div class="spec">规格</div>
          <div class="number">数量</div>
          <div class="price">单价</div>
          <div class="price1">优惠金额</div>
          <div class="money">金额</div>
        </div>
        <div class="goods-list">
          <div class="item" v-for="(goods, i) in item.good" :key="i">
            <img :src="goods.banner" alt="" />
            <div class="tit">{{ goods.name }}</div>
            <div
              class="spec"
              v-if="goods.specification_name"
              v-html="goods.specification_name.split(' ').join('<br/>')"
            ></div>
            <div class="num">
              <NumberInput1
                :disable="true"
                v-model="goods.goods_quantity"
                :max="goods.goods_quantity"
              />
            </div>
            <div class="price">
              <b>￥{{ goods.price }}</b>
            </div>
            <div class="price1">
              <b>￥{{ goods.price }}</b>
            </div>
            <div class="money">
              ￥{{ (goods.goods_quantity * goods.price).toFixed(2) }}
            </div>
          </div>
        </div>
      </div>
      <div class="order-cont">
        <div class="remarks">
          <div class="tips">订单备注</div>
          <el-input
            class="input"
            type="textarea"
            v-model="item.remark"
            :rows="6"
            placeholder="请输入…"
            show-word-limit
            :maxlength="200"
          >
          </el-input>
        </div>
        <div class="order-total">
          <div class="total-item">
            <span>商品总计</span>
            <b>¥ {{ goodPrice(item.good).toFixed(2) }}</b>
          </div>
          <div class="total-item">
            <span>店铺优惠</span>
            <!-- <el-select style="width: 200px" size="medium" placeholder="请选择">
            <el-option label="1111111" value="1111111"> </el-option>
            <el-option label="222222" value="222222"> </el-option>
          </el-select> -->
            <b> - ¥ 0.00</b>
          </div>
          <div class="total-item">
            <span>运送方式</span>
            <!-- <span>货到付款</span> -->
            <!-- <b>¥ 0.00</b> -->
            <b>货到付款</b>
          </div>
          <div class="total-item">
            <strong>合计</strong>
            <b>¥ {{ goodPrice(item.good).toFixed(2) }}</b>
          </div>
        </div>
      </div>
    </div>
    <div class="buy">
      <div class="price">
        <div class="box">
          <span
            >实付款<b>¥ {{ allPrice() }}</b></span
          >
          <div class="addr" v-if="addressIndex >= 0">
            寄送至：{{ addrList[addressIndex].contact
            }}<span>{{ addrList[addressIndex].phone }}</span
            >{{
              addrList[addressIndex].province +
              addrList[addressIndex].city +
              addrList[addressIndex].area +
              addrList[addressIndex].detail
            }}
          </div>
        </div>
        <div class="buy_btn" @click="placeOrder">提交订单</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api";
import { mapState } from "vuex";
import AddrsItem1 from "@/components/AddrsItem/AddrsItem1.vue";
import NumberInput1 from "@/components/NumberInput/NumberInput1.vue";

export default {
  name: "OrderCreate",
  components: { AddrsItem1, NumberInput1 },
  data() {
    return {
      goodsList: [],
      addrList: [],
      goodsNum: 0,
      goodsPrice: 0,
      addressIndex: -1,
      order: {
        address_id: null,
      },
    };
  },
  computed: {
    ...mapState("car", ["cartlist", "cartselect"]),
  },
  async created() {
    let addrList = await this.getAddrList();
    if (addrList.length) this.addressIndex = 0;

    this.renderGoodsList();
  },
  methods: {
    allPrice() {
      let price = 0;
      this.goodsList.forEach((shop) => {
        shop.good.forEach((goods) => {
          price += parseFloat(goods.price) * goods.goods_quantity;
        });
      });
      return price.toFixed(2);
    },
    goodPrice(goods) {
      let price = 0;
      goods.forEach((item) => {
        price += item.goods_quantity * item.price;
      });
      return price;
    },
    async getAddrList() {
      let result = await api.ADDR_LIST();
      this.addrList = result;
      return result;
    },
    renderGoodsList() {
      api.ORDER_GOODS({ type: 1 }).then((res) => {
        this.goodsList = res;
      });
    },
    addAddr() {
      this.Popups.AddAddr().show();
    },
    placeOrder() {
      let order = {
        address_id: this.addrList[this.addressIndex].id,
        shop: this.goodsList,
      };
      api.PLACE_ORDER(order).then((order) => {
        this.$confirm("订单已创建，是否确认下单？", "确认下单", {
          distinguishCancelAndClose: true,
          confirmButtonText: "确认",
          cancelButtonText: "取消",
        })
          .then(() => {
            api.ORDER_DETERMINE(order.order_number);
            this.$router.push({ path: "/user/order" });
          })
          .catch(() => {
            this.$router.push({ path: "/user/order" });
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 30px;
  background: #fff;
  position: relative;
  .steps {
    height: 82px;
    position: absolute;
    top: -102px;
    right: 50%;
    margin-right: -580px;
    width: 600px;
  }
  .title {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #d52c1a;
    .tips {
      color: #333;
      flex: 1;
      font-weight: 600;
    }
    .addr {
      margin-right: 20px;
      a {
        color: #d52c1a;
        text-decoration: none;
      }
    }
    .add_addr {
      cursor: pointer;
      i {
        padding-right: 2px;
      }
    }
  }
  .addrs-list {
    max-width: 1200px;
    margin: 16px auto 40px;
    .addrs-item {
      display: inline-block;
      margin-left: 21px;
    }
    & .addrs-item:nth-child(4n + 1) {
      margin-left: 0;
    }
  }
  .type {
    max-width: 1200px;
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
    .tips {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      margin-right: 36px;
    }
    .item {
      height: 36px;
      border: 1px solid #d52c1a;
      font-size: 16px;
      color: #333333;
      padding: 0 16px;
      display: flex;
      align-items: center;
      i {
        margin-left: 20px;
        color: #d52c1a;
      }
    }
  }
  .shop-item {
    max-width: 1200px;
    margin: 16px auto 20px;
    .shop-title {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      img {
        margin: 0 12px 0 17px;
        width: 28px;
        height: 28px;
        border-radius: 5px;
      }
      .tit {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
      }
    }
    .goods {
      background: #f9f9f9;
      border: 1px solid #dedede;
      .goods-title {
        height: 42px;
        background: #f3f5f9;
        border: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #333333;
        .info {
          width: 64px;
          padding: 0 248px 0 107px;
        }
        .spec {
          width: 32px;
          padding-right: 132px;
        }
        .price {
          width: 32px;
          padding-right: 89px;
        }
        .number {
          width: 32px;
          padding-right: 165px;
        }
        .price1 {
          width: 64px;
          padding-right: 168px;
        }
      }
      .goods-list {
        .item {
          margin: 16px 16px 20px;
          display: flex;
          img {
            width: 78px;
            height: 78px;
            border-radius: 5px;
          }
          .tit {
            width: 240px;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
            margin: 0 73px 0 12px;
          }
          .spec {
            width: 120px;
            margin-right: 40px;
            font-size: 14px;
            color: #666666;
            line-height: 20px;
          }
          .price {
            width: 80px;
            margin-right: 40px;
            display: flex;
            flex-direction: column;
            font-size: 14px;
            font-weight: 600;
            color: #333333;
            line-height: 20px;
            s {
              color: #999999;
              font-weight: 600;
            }
          }
          .num {
            margin-right: 82px;
          }
          .price1 {
            font-size: 14px;
            font-weight: 600;
            color: #333333;
          }
          .money {
            flex: 1;
            font-size: 16px;
            font-weight: 600;
            color: #d52c1a;
            line-height: 22px;
            text-align: right;
            padding-right: 20px;
          }
        }
      }
    }
  }
  .order-cont {
    max-width: 1200px;
    margin: 16px auto 20px;
    display: flex;
    .remarks {
      flex: 1;
      padding: 0 40px 0 20px;
      display: flex;
      align-items: flex-start;
      .tips {
        font-size: 14px;
        color: #333333;
        margin-top: 6px;
        width: 56px;
      }
      .input {
        flex: 1;
        margin-left: 12px;
      }
    }
    .order-total {
      width: 637px;
      background: #fffafa;
      border-radius: 0px 5px 5px 0px;
      .total-item {
        height: 50px;
        border: 1px solid #ffd6d6;
        border-top: 0;
        display: flex;
        align-items: center;
        padding: 0 40px 0 16px;
        font-size: 14px;
        color: #333333;
        span {
          padding-right: 12px;
        }
        b {
          flex: 1;
          text-align: right;
          font-size: 16px;
          font-weight: 600;
          color: #d52c1a;
        }
      }
      & .total-item:first-child {
        border-top: 1px solid #ffd6d6;
      }
    }
  }
  .buy {
    max-width: 1200px;
    margin: 16px auto 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-end;
    .price {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .box {
      width: 575px;
      background: #ffffff;
      border: 1px solid #d52c1a;
      padding: 20px 30px;
      text-align: right;
      span {
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        line-height: 20px;
        display: inline-flex;
        align-items: center;
        height: 33px;
        b {
          padding-left: 20px;
          font-size: 24px;
          color: #d52c1a;
          line-height: 33px;
        }
      }
      .addr {
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        line-height: 20px;
        span {
          padding: 0 20px;
        }
      }
    }
    .buy_btn {
      margin-top: 20px;
      width: 160px;
      height: 44px;
      background: #d52c1a;
      font-size: 16px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>
